/*
 * @Author: HuangYue
 * @Date: 2022-05-05 17:30:56
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-07 00:19:23
 * @FilePath: /graduation/src/pages/DataVisualization/Welcome/index.jsx
 * @Description: admin欢迎页 图表
 */
import { GridContent } from '@ant-design/pro-layout';
import ChartCard from '../components/ChartCard';
import React, { useState, useEffect, Suspense } from 'react';
import { Line } from '@ant-design/plots';
import { Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import IntroduceRow from './IntroduceRow';
import OfflineData from './OfflineData';
import Field from '../components/Field';
import { fakeChartData } from '../../../services/mockApi/dataVisualization';
import { useRequest } from 'umi';

const Welcome = () => {
  const [currentTabKey, setCurrentTabKey] = useState('');
  const { loading, data } = useRequest(fakeChartData);

  const handleTabChange = (key) => {
    setCurrentTabKey(key);
  };

  const config = {
    data: data?.lineChartData || [],
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    smooth: true,
    xAxis: {
      // type: 'timeCat',
      tickCount: 5,
    },
  };
  const activeKey = currentTabKey || (data?.offlineData[0] && data?.offlineData[0].name) || '';

  return (
    <GridContent>
      <>
        <Suspense fallback={null}>
          <IntroduceRow loading={loading} visitData={[]} />
        </Suspense>
        <Suspense>
          <ChartCard
            loading={loading}
            title="产品营收"
            action={
              <Tooltip title="指标说明">
                <InfoCircleOutlined />
              </Tooltip>
            }
            footer={
              <Field
                label="总营收"
                value={data?.lineChartData.reduce((t, c) => {
                  return t + c.scales;
                }, 0)}
              />
            }
          >
            <Line {...config} />
          </ChartCard>
        </Suspense>

        <Suspense fallback={null}>
          <OfflineData
            activeKey={activeKey}
            loading={loading}
            offlineData={data?.offlineData || []}
            offlineChartData={data?.offlineChartData || []}
            handleTabChange={handleTabChange}
          />
        </Suspense>
      </>
    </GridContent>
  );
};

export default Welcome;
